import React, { Component } from 'react'
import { push } from 'react-router-redux'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { isLoaded as isAuthLoaded } from './reducer'
import { asyncConnect } from 'redux-async-connect'
import { loadAuthWithToken, logoutAuth } from './actions';

@asyncConnect([{
  promise: ({store: {dispatch, getState}}) => {
    const promises = [];

    if (!isAuthLoaded(getState())) {
      promises.push(dispatch(loadAuthWithToken()));
    }

    return Promise.all(promises);
  }
}])
@connect(
  state => ({user: state.auth.user}),
  { logoutAuth, pushState: push } )
export default class App extends Component {

  componentWillReceiveProps(nextProps) {
    // console.log('receiving props.')
    // if (!this.props.user && nextProps.user) {
    //   // login
    //   console.log('pushing to posts.')
    //   this.props.pushState('/');
    // } else if (this.props.user && !nextProps.user) {
    //   // logout
    //   this.props.pushState('/');
    // }
  }

  handleLogout = (event) => {
    event.preventDefault();
    this.props.logoutAuth();
  };

  render() {

    const {user, logout, loadAuth} = this.props
    const styles = require('./App.scss')

    const divStyle = {
      margin: '0 auto',
    };

    const aCenter = {
      'fontSize': 20,
      'textAlign': 'center'
    };

    return (
      <div>

        <nav className="navbar navbar-inverse">
          <div className="container">
            <div className="navbar-header">
              <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
              </button>
              <Link className="navbar-brand" to="/">Bootstrap</Link>
            </div>
            <div id="navbar" className="navbar-collapse collapse">
              <ul className="nav navbar-nav">
                     
                {/* 
                <li><Link to="/postpages/1">Posts_Pages</Link></li>

                <li><Link to="/submit">SubmitValidationForm</Link></li>

                <li><Link to="/asynform">AsynchronousBlurValidationForm</Link></li>

                <li><Link to="/synform">SynchronousValidationForm</Link></li>

                <li><Link to="/MyEditor">MyEditor</Link></li>

                <li><Link to="/MediaEditor">MediaEditor</Link></li>                
                */} 

                <li><Link to="/GamePostList">GamePostList</Link></li>

                <li><Link to="/GamePostEditor">GamePostEditor</Link></li>

                <li><Link to="/avt">AvatarTest</Link></li>

                {user && <li><Link to="/me" >My Profile</Link></li>  }
                
                {!user && <li><Link to="/register">Register</Link></li> }

                {!user && <li><Link to="/login">Login</Link></li> }

                {user && <li><Link to="/logout" onClick={this.handleLogout}>Logout</Link></li> }

              </ul>
            </div>
          </div>
        </nav>

        <div className="container">
          
          <div className="row">
            <div className="col-lg-12" style={aCenter}>
              <h4>Welcome to: Redux, Webpack, and NodeJS App</h4> 
            </div>
          </div>

          <div className="row">
            <div className="col-lg-12" style={aCenter}>
              Above is App Component; Below is a Child React Component.
            </div>            
          </div>

          <hr />

          {this.props.children}

        </div>

      </div>
    )
  }
}

/*
   Below is another way to wrap the component.
*/

// function mapStateToProps(state, ownProps) {
//   let user = state.auth.user
//   return {
//     user
//   }
// }
// export default connect(mapStateToProps, {pushState: push})(App)